<template>
	<view class="extract-container">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<view style="width: 136rpx;">
					<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
				</view>
				<view class="nav-title">提币</view>
				<view style="width: 136rpx; height: 36rpx;" @click="toDetail">{{ $t("提币明细") }}</view>	
			</view>
		</view>

		<view class="place"></view>

		<view class="box z-flex-center">
			<text>{{$t('提币币种')}}</text>
			<text class="unit">USDT</text>
		</view>
		
		<view class="tabVue">
			<view class="tab" :class="{active: current===0}" @click="current=0">BEP-20</view>
			<view class="tab" :class="{active: current===1}" @click="current=1;">TRC-20</view>
		</view>

		<view class="box">
			<u--form labelPosition="top" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
				<u-form-item :label="$t('提币地址') + `(${current==0 ? 'BEP-20' : 'TRC-20'})`" prop="address">
					<u--input v-model="form.address" border="bottom" :placeholder="$t('请输入或长按粘贴地址')"
						placeholderStyle="{color: #999999}"></u--input>
					<image class="sweep-icon" src="/static/imgs/sweep.png" mode="widthFix" @click="scanCode"></image>
				</u-form-item>

				<u-form-item :label="$t('数量')" prop="amount">
					<u--input v-model="form.amount" type="number" border="bottom" :placeholder="$t('请输入提币数量')"
						placeholderStyle="{color: #999999}" @input="changeAmount()"></u--input>
				</u-form-item>

				<view class="surplus">{{$t('可用')}}{{ using }}USDT</view>
				<view class="surplus">{{$t('手续费')}}</view>
				<view class="surplus">{{ (form.amount * rate * 100) / 10000 }}USDT</view>
				<!-- <u-form-item label="手续费" prop="serve_money">
					<u--input v-model="form.serve_money" disabled="disabled" border="bottom" placeholder="请输入手续费"
						placeholderStyle="{color: #999999}"></u--input>
				</u-form-item> -->
				<view class="z-flex-center money-box">
					<text>{{$t('到账数量')}}</text>
					<text>{{form.amount - (form.amount * rate * 100) / 10000}}USDT</text>
				</view>
			</u--form>
		</view>
		<u-button type="primary" :text="$t('提交')" @tap="submint"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: true,
				current: 0,
				form: {
					address: '',
					amount: '',
					// serve_money:0
				},
				using: 0,
				rate: 0,
				// rules: {
				//   id: {
				//     required: true,
				//     message: $t("请输入或长按粘贴地址"),
				//     trigger: ["blur", "change"],
				//   },
				//   num: [{
				//       required: true,
				//       message: $t("请输入数量"),
				//       trigger: ["blur", "change"],
				//     },
				//     {
				//       validator: (rule, value, callback) => {
				//         return value > 0;
				//       },
				//       message: $t("充值数量不能小于1"),
				//       trigger: ["change", "blur"],
				//     },
				//   ],
				//   // serve_money: {
				//   // 	required: true,
				//   // 	message: "请输入手续费",
				//   // 	trigger: ["blur", "change"],
				//   // }
				// },
				serve_money: 0,
			};
		},
		computed: {
			rules() {
				return {
					address: {
						required: true,
						message: this.$t("请输入或长按粘贴地址"),
						trigger: ["blur", "change"],
					},
					amount: [{
							required: true,
							message: this.$t("请输入提币数量"),
							trigger: ["blur", "change"],
						},
						{
							validator: (rule, value, callback) => {
								return value > 0;
							},
							message: this.$t("提币数量不能小于1"),
							trigger: ["change", "blur"],
						},
					],
				}
			}
		},
		methods: {
			scanCode() {
				uni.scanCode({
					success: (res) => {
						console.log("条码类型：" + res.scanType);
						console.log("条码内容：" + res.result);
					},
					fail: (err) => {
						console.log("扫码调起失败");
					},
				});
			},

			changeAmount() {
				if (this.form.amount > this.using) {
					this.form.amount = this.using;
				}

				if (this.form.amount <= 0) {
					this.form.amount = 0;
				}
			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			toDetail() {
				uni.navigateTo({
					url: `/pages/finance/extract-details`,
				});
			},
			submint() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						uni.$u.toast(this.$t("校验通过"));
						console.log(this.form, "form");

						this.$http
							.post(
								`/front/assets/extract?address=${this.form.address}&amount=${this.form.amount}`
							)
							.then((res) => {
								if (res.code === 0) {
									uni.$u.toast(this.$t("提现成功"));
								}
							})
							.catch((err) => {
								console.error(err);
							});
						// 返回上一个页面
						uni.navigateBack({
							delta: 1,
						});
						// uni.navigateTo({
						// 	url: `/pages/finance/evidence`
						// })
					})
					.catch((errors) => {
						uni.$u.toast(this.$t("校验失败"));
					});
			},

			getInfo() {
				this.$http
					.post(`/front/assets/assets`)
					.then((res) => {
						console.log(res, 123);

						if (res.code === 0) {
							this.rate = res.obj.rate;
							this.using = res.obj.wallet.using;
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},

		onLoad() {
			this.getInfo();
		},
	};
</script>

<style lang="scss" scoped>
	.tabVue {
		width: 690rpx;
		height: 88rpx;
		display: flex;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		.tab {
			width: 3330rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
		}
		.active {
			color: #D55B94;
			font-weight: 600;
		}
	}
	.extract-container {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;

		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}

		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;

			.status {
				width: 100%;
				height: var(--status-bar-height);
			}

			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;

				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}

		.box {
			width: 690rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			margin: 20rpx auto 0;
			box-sizing: border-box;
			padding: 0 30rpx;

			.unit {
				color: #333;
				font-weight: 600;
			}

			/deep/ .u-form-item__body__left__content__label,
			/deep/ .u-input__content__field-wrapper__field {
				font-size: $uni-font-size-36;
				color: #333 !important;
			}

			/deep/ .u-form-item__body__right__content {
				position: relative;
			}

			/deep/ .u-input {
				height: 100rpx;
				padding: 0 !important;
				border-bottom-color: #343547 !important;
			}
		}

		.sweep-icon {
			position: absolute;
			right: 0;
			width: 46rpx;
		}

		.surplus {
			margin-bottom: 50rpx;
			font-size: $uni-font-size-28;
		}

		.money-box {
			padding: 57rpx 0;
			font-size: $uni-font-size-36;
		}

		/deep/ .u-button {
			width: 690rpx;
			height: 90rpx;
			// margin-top: 100rpx;
			background: #D55B94;
			border-radius: 20rpx;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 60rpx;
		}
	}
</style>